/* eslint-disable vue/html-indent */ /* eslint-disable vue/html-indent */
<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select
        v-model="listQuery.gender"
        clearable
        filterable
        placeholder="性别"
        style="width:100px"
      >
        <el-option label="未知" value="0" />
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
      <el-select v-model="listQuery.channel" clearable filterable placeholder="渠道">
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-select
        v-model="listQuery.abTest"
        clearable
        filterable
        placeholder="ab测试"
        style="width:150px"
      >
        <el-option
          v-for="(test, i) in abTests"
          :key="i"
          :label="test"
          :value="test"
        />
      </el-select>
      <el-select
        v-model="listQuery.bundleId"
        clearable
        placeholder="包名"
      >
        <el-option label="花伴交友app安卓" value="com.vchat.flower" />
        <el-option label="花伴交友app苹果" value="com.vchat.flower.ios" />
        <el-option label="花伴约会app安卓" value="com.date.flower" />
        <el-option label="花伴约会app苹果" value="com.date.flower.ios" />
        <el-option label="成人约会圈app安卓" value="com.chengren.yhq" />
        <el-option label="他趣附近约会app安卓" value="com.funnychat.mask" />
      </el-select>
      <el-select v-model="listQuery.version" filterable clearable placeholder="客户端版本">
        <el-option
          v-for="(version, i) in versions"
          :key="i"
          :label="version"
          :value="version"
        />
      </el-select>
      <el-date-picker
        v-model="registerDateRangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始注册时间"
        end-placeholder="结束注册时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="myDateRangeChangedTimestamp"
      />
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="myResetFilter"
      >
        重置
      </el-button>
      <el-button
        type="warning"
        @click="exportExcel('#ActiveList-out-table', '活跃用户')"
      >导出</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        id="ActiveList-out-table"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 350px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="日期">
          <template slot-scope="{ row }">
            <span>{{
              (row.targetDate) | parseTime('{y}-{m}-{d}')
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="激活人数" prop="isRegister">
        </el-table-column>

        <el-table-column align="center" label="活跃人数" prop="accountSum">
        </el-table-column>

        <el-table-column align="center" label="活跃充值(元)">
          <template slot-scope="{ row }">
            <span>{{ (row.recharge / 100) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="活跃充值次数" prop="rechargeCount">
        </el-table-column>

        <el-table-column align="center" label="活跃充值人数" prop="isRecharge">
        </el-table-column>

        <el-table-column align="center" label="提现金额(元)">
          <template slot-scope="{ row }">
            <span>{{ (row.withdraw / 100) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="付费率">
          <template slot-scope="{ row }">
            <span>{{ ((row.isRecharge / row.accountSum) * 100).toFixed(2) }}%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="ARPU(元)">
          <template slot-scope="{ row }">
            <span>{{ (((row.recharge / 100) / row.accountSum)).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="ARPPU(元)">
          <template slot-scope="{ row }">
            <span>{{ row.isRecharge > 0 ? (((row.recharge / 100) / row.isRecharge)).toFixed(2) : 0.00 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="LTV(元)">
          <template slot-scope="{ row }">
            <span>{{ row.isRegister > 0 ? ((row.ltv / 100 / row.isRegister)).toFixed(2) : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="启动次数" prop="startCount">
        </el-table-column>
        <el-table-column align="center" label="在线时长(分)">
          <template slot-scope="{ row }">
            <span>{{ (row.onlineTime / row.accountSum / 60).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="语音接通次数" prop="voiceThroughCount">
        </el-table-column>
        <el-table-column align="center" label="视频接通次数" prop="videoThroughCount">
        </el-table-column>
        <el-table-column align="center" label="视频平均时长（分）">
          <template slot-scope="{row}">
            <span>{{ row.videoThroughCount === 0 ? 0 : (row.videoTimeCount / row.videoThroughCount / 1000 / 60).toFixed(0) }}:{{ row.videoThroughCount === 0 ? 0 : ((row.videoTimeCount / row.videoThroughCount / 1000).toFixed(0) % 60) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="文字聊天次数" prop="chatCount">
        </el-table-column>
        <el-table-column align="center" label="钻石消耗">
          <template slot-scope="{ row }">
            {{ Math.abs(row.diamondExpend) / 10 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="获得积分" prop="integral">
          <template slot-scope="{ row }">
            {{ row.integral / 100 }}
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
  import { xhrActiveUser, xhrChannels, xhrVersions } from '@/api/analysis'

  export default {
    name: 'ActiveList',
    components: { TablePagination },
    data() {
      return {
        list: [],
        channels: [],
        abTests: [],
        versions: [],
        total: 0,
        listQuery: {
          offset: 0,
          limit: 100,
          registerEndTime: null,
          registerStartTime: null,
          startTime: null,
          endTime: null,
          channel: null,
          gender: null,
          abTest: null,
          bundleId: null
        },
        daterangeValue: '',
        registerDateRangeValue: '',
        daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions
      }
    },
    created() {
      this.doSearch()
      this.getVersions()
      this.getChannels()
    },
    methods: {
      getVersions() {
        xhrVersions().then(resp => {
          this.versions = resp.data
        })
      },
      getChannels() {
        xhrChannels().then(resp => {
          // console.log(resp)
          this.channels = resp.data
        })
      },
      doSearch() {
        xhrActiveUser(this.listQuery).then(resp => {
          this.listLoading = false
          this.total = resp.data.count
          this.abTests = resp.data.abTests
          this.list = resp.data.list
        })
      },
      myDateRangeChangedTimestamp() {
        const start = new Date(this.registerDateRangeValue && this.registerDateRangeValue[0])
        this.listQuery.registerStartTime = `${start.getFullYear()}-${
          start.getMonth() > 8
            ? start.getMonth() + 1
            : '0' + (start.getMonth() + 1)
        }-${start.getDate() > 9 ? start.getDate() : '0' + start.getDate()}`
        // end_time 需要+1天,
        if (!this.registerDateRangeValue || !this.registerDateRangeValue[1]) {
          this.listQuery.registerEndTime = null
        } else {
          const end = new Date(
            new Date(this.registerDateRangeValue && this.registerDateRangeValue[1]).getTime() +
            24 * 60 * 60 * 1000
          )
          this.listQuery.registerEndTime = `${end.getFullYear()}-${
            end.getMonth() > 8 ? end.getMonth() + 1 : '0' + (end.getMonth() + 1)
          }-${end.getDate() > 9 ? end.getDate() : '0' + end.getDate()}`
        }
      },
      myResetFilter() {
        if (this.defaultQueryParams) {
          this.listQuery = Object.assign({}, this.defaultQueryParams)
        } else {
          for (var key in this.listQuery) {
            this.listQuery[key] = null
          }
        }
        this.daterangeValue = ''
        this.registerDateRangeValue = ''
        this.doSearch()
      }
    }
  }
</script>
